<template>
  <div class="shopInfo">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <p>刷新次数: {{ count }}</p>
      <ul v-for="(item,index) in shopData" :key="index">
        <li v-for="(item,index) in item.foods" :key="index">
          <ul>
            <van-row type="flex">
              <van-col span="6">
                <li class="foodsImage" v-if="item.image_path">
                  <img :src="item.image_path" alt />
                </li>
              </van-col>
              <van-col span="18" class="right">
                <li class="veg">菜品：{{item.name}}</li>
                <li>评分：{{item.rating}}</li>
                <li>{{item.tips}}</li>
                <li class="desc">描述:{{item.description}}</li>
              </van-col>
            </van-row>
          </ul>
        </li>
        <div style="text-align:center;padding-top:20px">-------没有更多的商户--------</div>
      </ul>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "shopInfo",
  props: {
    shopData: Array,
  },
  data() {
    return {
      count: 0,
      isLoading: true,
    };
  },
  created() {
    this.maopao();
  },
  methods: {
    maopao() {
      let array = [10, 20, 9, 8, 79, 65, 100];

      array.sort((a, b) => {
        return b - a;
        // return a - b;
      });
      console.log(array);
    },
    onRefresh() {
      setTimeout(() => {
        // Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.shopInfo {
  padding-top: 30px;
}
.foodsImage img {
  width: 120px;
}
.veg {
  padding: 20px 0 0px 0;
}
.right {
  margin: 0 0 0 110px;
}
.desc {
  font-size: 12px;
  color: red;
}
</style>